<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="never">
    <title>豆瓣电影</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            height: 100%;
        }

        body {
            background-color: #191a20;
            /* background-color: #ffffff; */
        }

        a {
            text-decoration: none;
            margin-left: 0;
            color: #fff;
        }

        .container {
            margin: 50px auto;
            width: 80%;
        }

        .header {
            width: 100%;
        }

        .classification {
            display: flex;
            width: 45%;
        }

        .classification div {
            width: 150px;
            padding: 0 10px;
            margin-right: 20px;
            line-height: 50px;
            color: #fff;
            font-size: 16px;
            text-align: center;
            border-radius: 10px;
            flex: 0 0 auto;
            background-color: #3b3e47cb;
            cursor: pointer;
        }

        .pageNum-wraper {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 74px;
            margin-top: 20px;
            overflow: hidden;
        }

        .pageNum-wraper .pageNumber {
            display: flex;
            flex-wrap: wrap;
            width: 87%;
        }
        .pageNumber div, .more {
            padding: 0 30px;
            margin-right: 7px;
            margin-top: 7px;
            font-size: 14px;
            color: honeydew;
            line-height: 30px;
            border-radius: 15px;
            text-align: center;
            background-color: #2d2f36;
            cursor: pointer;
        }
        .pageNum-wraper .more {
            width: 5%;
            line-height: 65px;
        }
        .content {
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .movie-wrapper {
            position: relative;
            margin-top: 30px;
            width: 210px;
            height: 350px;
            transition: all .3s;
        }

        .content .movie-none {
            width: 210px;
            height: 0;
        }

        .movie-wrapper img {
            width: 100%;
            height: 275px;
            border-radius: 5px;
        }

        .movie-wrapper p {
            line-height: 19px;
            font-size: 15px;
            color: #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .movie-wrapper p:nth-child(2) {
            line-height: 35px;
            color: #fff;
            font-size: 18px;
        }

        .mask {
            position: absolute;
            top: calc(350px / 2);
            left: 0;
            /* display: flex; */
            display: none;
            flex-direction: column;
            height: 50%;
            width: 100%;
            padding-left: 10px;
            color: #ccc;
            font-size: 13px;
            background-color: #2d2f36;
            box-sizing: border-box;
            border-radius: 2px 2px 10px 10px;
        }

        .mask div {
            margin-top: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .mask div:first-child {
            margin-top: 15px;
            /* color: #fff; */
            font-size: 18px;
            line-height: 44px;
        }

        .classification-active{
            border: seagreen solid 2px;
        }
        .pageNum-wraper .pageNumber .pageNumber-active{
            background-color: seagreen;
        }
        .more-mask{
            position: fixed;
            display: none;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999;
            background-color: rgba(255, 255, 255, .4);
        }
        .more-mask .pages{
            width: 30%;
            padding: 60px 20px;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            background-color: #35373e;
            border-radius: 20px;
        }
        .more-mask .pages .page-xx{
            width: 40px;
            height: 40px;
            box-sizing: border-box;
            line-height: 40px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            flex: 0 0 auto;
            border: rgb(150, 150, 150) solid 1px;
            border-radius: 5px;
            margin-left: 20px;
            margin-top: 20px;
        }
        .more-mask .pages .page-active{
            background-color: rgb(66, 231, 138);
        }
        .more-mask .pages .page-xx:hover{
            background-color: rgb(66, 231, 138);
            cursor: pointer;
        }
        
        a:hover{
            color: rgb(66, 231, 138);
        }
        /*
            响应式 
         */
        @media (max-width: 1200px) {

        }
        @media (max-width: 992px) {
            .classification div{
                margin-right: 10px;
                width: 100px;
                height: 40px;
                padding: 0 5px;
                line-height: 40px;
                font-size: 14px;
            }
            .content {
                justify-content: space-evenly;
            }
        }
        @media (max-width: 768px) {
            .pageNumber div, .more{
                font-size: 12px;
            }
            .pageNum-wraper .more {
                width: 60px;
                height: 40px;
                padding: 0 10px;
                line-height: 40px;
                box-sizing: border-box;
                overflow: hidden;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <!-- <nav>
            <div class="header">
                <!-- <div class="classification">
                    <div class="classification-xxx">正在热映</div>
                    <div class="classification-xxx">即将上映</div>
                    <div class="classification-xxx">top250</div>
                </div> -->

                <!-- <div class="pageNum-wraper">
                    <div class="pageNumber">
                        <div>1</div>
                        <div>2</div>
                        <div>3</div>
                        <div>4</div>
                        <div>5</div>
                        <div>6</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>10</div>
                        <div>7</div>
                        <div>8</div>
                        <div>9</div>
                        <div>10</div>
                    </div>
                    <div class="more">更多>></div>
                </div> -->
            </div>
        </nav> -->

        <!-- <div class="content">
            <div class="movie-wrapper">
                <img src="../lib/dx.png" alt="">
                <p><a href="">大侠霍元甲</a></p>
                <p>武侠，战斗dasdasd</p>
                <div class="mask">
                    <div><a href="">大侠霍元甲</a></div>
                    <div>时长：98分钟</div>
                    <div>平均分：6.6</div>
                    <div>导演：安妮大是</div>
                    <div>编剧：的啥的啥的是多少</div>
                </div>
            </div>
            <div class="movie-none"></div>
            <div class="movie-none"></div>
            <div class="movie-none"></div>
        </div> -->
        <!-- <div class="more-mask">
            <div class="pages">
                <div class="page-xx">1</div>
                <div class="page-xx">1</div>
                <div class="page-xx">1</div>
                <div class="page-xx">1</div>
            </div>
        </div> -->
    </div>
    <script src="../jquery/jquery.min.js"></script>
    <script>
            /*
            URL：
                正在热映：http://bufantec.com/api/douban/movie/in_theaters
                即将上映：http://bufantec.com/api/douban/movie/coming_soon
                TOP250：http://bufantec.com/api/douban/movie/top250
            
                发送的参数： 当前页 start 默认0  发送每页的数量 limit 默认10
    
                练习要求：
                    1. 实现切换类型
                    2. 实现分页  ?start=xx&limit=xx
                    3. 实现响应式
                    4. 字段名：title longtime genres数组 rating_average平均分
                    director导演数组 scriptwriter编剧数组  small/medium/large 海报
                    字段名超出行变成 ...
            */

            ; (function (w, $) {
                function MovieDay(container, moviePath, setting) {
                    this.container = document.querySelector(container);
                    // 电影路径
                    this.moviePath = moviePath;
                    // 当前分类
                    this.classification = 0;
                    // 当前页面数
                    this.pageNumber = 1,
                    // ajax数据
                    this.data = null;
                    // ajax是否获取全部数据
                    this.readyState = 0;
                    // 设置默认值
                    this.setting = Object.assign({
                        bgcolor: 'white',
                        pageSize: 10,
                    }, setting)
                    this.init();
                }
                // 原型扩展函数
                MovieDay.prototype.extends = function (obj) {
                    for (var i in obj) {
                        if (!(i in MovieDay.prototype)) {
                            MovieDay.prototype[i] = obj[i]
                        }
                    }
                }
                // 挂载函数
                MovieDay.prototype.extends({
                    // 启动引擎
                    init() {
                        // 分类初始化  分类永远不变
                        this.setClassification();
                        // 初始化页面
                        this.initPage();
                    },
                    // 分类初始化
                    setClassification() {
                        // 挂载分类
                        var str = 
                            `
                                <nav>
                                    <div class="header">
                                        <div class="classification">
                                            <div class="classification-xx classification-active">正在热映</div>
                                            <div class="classification-xx">即将上映</div>
                                            <div class="classification-xx">top250</div>
                                        </div>
                                    </div>
                                </nav>
                            `;
                        $(this.container).append(str);
                        // 添加分类的点击事件
                        var that = this;
                        $('.classification').on('click', '.classification-xx', function () {
                            // 点击样式改变
                            $('.classification-active').removeClass('classification-active');
                            $(this).addClass('classification-active');
                            // 将页码初始化
                            that.pageNumber = 1;
                            // 更改电影详细
                            var index = $(this).index();
                            that.classification = index;
                            that.initPage();
                        })
                    },
                    // 初始化分页
                    initPageNumber() {
                        // 挂载分页
                        var str = 
                            `
                                <div class="pageNum-wraper">
                                    <div class="pageNumber">
                            `;
                        for (var i = 0; i < this.data.totalPage; i++) {
                            str += `<div class="pageNumber-xx">${i+1}</div>`
                        }
                        str += 
                            `
                                    </div>
                                <div class="more">更多>></div>
                            </div>
                            `;
                        str = str.replace('<div class="pageNumber-xx">', '<div class="pageNumber-xx pageNumber-active">')
                        $('.pageNum-wraper').remove();
                        $('.header').append(str);
                        // 挂载分页点击事件
                        var that = this;
                        $('.pageNumber').on('click', '.pageNumber-xx', function () {
                            var index = $(this).index() + 1;
                            // 更改当前页数
                            that.pageNumber = index;
                            // 更改分页样式
                            $('.pageNumber-active').removeClass('pageNumber-active');
                            $(this).addClass('pageNumber-active');
                            // 重新页面获取到的ajax数据
                            that.getAjax();
                            that.timer = setInterval(function () {
                                if (that.readyState) {
                                    that.initNewAjax();
                                    clearInterval(that.timer);
                                    that.readyState = 0;
                                }
                            }, 100)
                        })
                        // 挂载更多 打开的mask
                        var str1 = 
                            `
                                <div class="more-mask">
                                    <div class="pages">
                            `;
                        for (var i = 0; i < this.data.totalPage; i++) {
                            str1 += `<div class="page-xx">${i+1}</div>`;
                        }
                        str1 += `</div></div>`;
                        str1 = str1.replace('<div class="page-xx">', '<div class="page-xx page-active">')
                        // 清除之前的东西
                        $('.more-mask').remove();
                        $(this.container).append(str1);
                        // 给more绑定点击事件 点击出现所有分页
                        $('.more').click(function () {
                            $('.more-mask').fadeIn(200).css({
                                display: 'flex',
                            });
                            // 给当前页加上样式
                            $('.page-active').removeClass('page-active');
                            $('.page-xx').eq(that.pageNumber-1).addClass('page-active');
                        })
                        // 点击其他地方关闭分页
                        $('.more-mask').click(function () {
                            console.log('fade');
                            $(this).fadeOut();
                        })
                        // 阻止事件向外扩张 避免失误关闭页面
                        $('.pages').click(function () {
                            event.stopPropagation();
                        })
                        // 所有分页跳转
                        $('.page-xx').click(function () {
                            var index = $(this).index() + 1;
                            // 更改当前页数
                            that.pageNumber = index;
                            // 更改分页样式
                            $('.pageNumber-active').removeClass('pageNumber-active');
                            $('.pageNumber-xx').eq(index-1).addClass('pageNumber-active');
                            // 重新页面获取到的ajax数据
                            that.getAjax();
                            that.timer = setInterval(function () {
                                if (that.readyState) {
                                    that.initNewAjax();
                                    clearInterval(that.timer);
                                    that.readyState = 0;
                                }
                            }, 100)
                            // 关闭遮罩层
                            $('.more-mask').fadeOut();
                        })
                    },
                    //初始化页面
                    initPage() {
                        // ajax异步，获取ajax后页面才渲染数据
                        this.getAjax();
                        var that = this;
                        that.timer = setInterval(function () {
                            if (that.readyState) {
                                that.initPageNumber();
                                that.initNewAjax();
                                clearInterval(that.timer);
                                that.readyState = 0;
                            }
                        }, 100)
                    },
                    // 页面渲染获取到的ajax数据
                    initNewAjax() {
                        var list = this.data.list;
                        var str = ''
                        str =
                            `
                                <div class="content">
                            `;
                        for (var i = 0; i < list.length; i++) {
                            str += 
                                `
                                    <div class="movie-wrapper">
                                        <img src="${list[i].small}" alt="">
                                        <p><a href="${list[i].alt}" target="_blank">${list[i].title}</a></p>
                                        <p>${this.getArrstr(list[i].genres)}</p>
                                        <div class="mask">
                                            <div><a href="${list[i].alt}" target="_blank">${list[i].title}</a></div>
                                            <div>时长：${list[i].longtime}</div>
                                            <div>平均分：${list[i].rating_average}</div>
                                            <div>导演：${this.getArrstr(list[i].director)}</div>
                                            <div>编剧：${this.getArrstr(list[i].scriptwriter)}</div>
                                        </div>
                                    </div>
                                `;
                        }
                        str += 
                            `
                                    <div class="movie-none"></div>
                                    <div class="movie-none"></div>
                                    <div class="movie-none"></div>
                                </div>
                            `;
                        $('.content').remove();
                        $(this.container).append(str);
                        // 挂载详情hover事件
                        $('img').hover(function () {
                            // 鼠标在详情上
                            var $mask = $(this).closest('.movie-wrapper').children('.mask');
                            $mask.fadeIn(200).css({
                                display: 'flex',
                            }).parent().css({
                                transition: 'all .4s',
                                transform: 'scale(1.1)',
                            })
                        })
                        $('.movie-wrapper').mouseleave(function () {
                            // 鼠标移出详情
                            var $mask = $(this).closest('.movie-wrapper').children('.mask');
                            $mask.stop().css({
                               display: 'none',
                            }).parent().css({
                                transition:'none',
                                transform: 'scale(1)'
                            })
                        })
                    },
                    // 获取数组字符串
                    getArrstr(arr) {
                        if (arr) {
                            return arr.join('，')
                        }
                    },
                    // 获取ajax数据
                    getAjax() {
                        var that = this;
                        var xhr = new XMLHttpRequest();
                        xhr.onreadystatechange = function () {
                            if (xhr.readyState === 4 && xhr.status === 200) {
                                var content = xhr.responseText;
                                that.data = JSON.parse(content).data;
                                console.log('is ok!');
                                that.readyState = 1;
                            }
                        }
                        xhr.open('GET', `http://bufantec.com/api/douban/movie/${that.moviePath[that.classification]}?start=${that.pageNumber}&limit=${that.setting.pageSize}`);
                        xhr.send(null);
                    }
                })

                w.MovieDay = MovieDay;
            })(window, jQuery)

        new MovieDay('.container', [
            'in_theaters',
            'coming_soon',
            'top250'
        ], {
            // 设置默认的主题颜色
            bgcolor: 'white',
            // 设置分页
            pageSize: 9,
        })
    </script>
</body>

</html>